<template>
  <div>
    <div>
      <el-row>
        <el-col :span="8">
          <el-input
              placeholder="请输入内容"
              v-model="input"
              clearable>
          </el-input>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" icon="el-icon-search" @click="getPatents">搜索</el-button>
        </el-col>
      </el-row>
    </div>

    <div style="margin-top: 15px" v-if="myCards.length>0">
      <el-row :gutter="18" style="margin-top: 5px">
        <div v-for="(item,index) in myCards.slice(0,3)" :key="index">
          <el-col :span="6">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>{{ item.name }}</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="patentInfo(item.id)">查看详情</el-button>
              </div>
              <div class="text item">
                <p>专利类型：{{ item.type }}</p>
                <p>专利简介：{{ item.content }}</p>
                <p>专利联系人：{{ item.applicants[0].name}}</p>
                <p>联系人电话：{{ item.applicants[0].telephone}}</p>
              </div>
            </el-card>
          </el-col>
        </div>
      </el-row>
    </div>
    <div style="margin-top: 15px" v-if="myCards.length>3&&myCards.length<=6">
      <el-row :gutter="18" style="margin-top: 5px">
        <div v-for="(item,index) in myCards.slice(3,6)" :key="index">
          <el-col :span="6">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>{{ item.name }}</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="patentInfo(item.id)">查看详情</el-button>
              </div>
              <div class="text item">
                <p>专利类型：{{ item.type }}</p>
                <p>专利简介：{{ item.content }}</p>
                <p>专利联系人：{{ item.applicants[0].name}}</p>
                <p>联系人电话：{{ item.applicants[0].telephone}}</p>
              </div>
            </el-card>
          </el-col>
        </div>
      </el-row>
      <div style="display: flex;align-items: center;justify-content: center;margin-top: 25px">
        <el-button type="primary" icon="el-icon-refresh-left" circle @click="getPatents"></el-button>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  name: "PatentSelect",
  data() {
    return {
      input:'',
      myCards: [],
      index: 1
    }
  },
  created() {
    this.getPatents();
  },
  methods: {
    getPatents() {
      if (this.index>2) {
        this.index=1;
      }
      this.$axios.get('/patent/select', {
        params: {
          name: this.input,
          start: this.index,
        }
      }).then(res => {
        console.log(res.data);
        this.myCards = res.data.data;
        this.index++;
      })
    },
    patentInfo(id){
      console.log(id);
      this.$router.push({
        name: "sys:patent:transaction",
        params: {
          patentId:id,
        }
      });
    }
  }
}
</script>

<style scoped>
.el-row {
  display: flex;
  align-items: center;
  justify-content: center;
}

.el-col {
  border-radius: 4px;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 320px;
}
</style>